<template>
  <div class="fillcontain">
    <HeadTop></HeadTop>
    <div style="text-align: right; margin-right: 10px; margin-top: 10px">
      <span style="margin-right: 400px;color: #42b983">10以内加减法</span>
      <el-button
          size="mini"
          @click="showAnswer()">
        检查答案
      </el-button>
    </div>
    <transition name="form-fade" mode="in-out">
    <div class="table_container">
      <el-table
        :data="tableData"
        height="100%"
        stripe
        :row-class-name="rowClassName"
        style="width: 100%">
        <el-table-column
          label="题号"
          width="150"
          prop="id">
        </el-table-column>
        <el-table-column
          label="题目"
          prop="exercise">
          <template slot-scope="scope">
            <span>{{ scope.row.exercise }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="答案"
          prop="answer">
          <template slot-scope="scope">
            <el-input
                v-model="inputNum[scope.$index]"
                placeholder="请输入答案"
                style="width: 150px"
                clearable>
            </el-input>
            <transition name="el-fade-in-linear">
              <span v-if="showFlag" v-html="checkAnswer(scope.$index)">{{ " " + checkAnswer(scope.$index) }}</span>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
            label="正确答案"
            prop="answer">
          <template slot-scope="scope">
            <span v-if="showFlag">{{ scope.row.answer }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </transition>
  </div>
</template>

<script>
import HeadTop from "@/component/headTop";

export default {
  name: 'exercisePage',
  components: {
    HeadTop
  },
  data() {
    return {
      index: 1,
      maxNumber: 30,
      range: 10,
      showFlag: false,
      questionNum: 1,
      tableData: [],
      inputNum: ['']
    }
  },
  created() {
    this.getScale()
    this.makeGen()
  },
  methods: {
    rowClassName({row, rowIndex}){
      row.id = rowIndex + 1
    },
    getScale() {
      if(this.$route.params.index !== undefined) {
        this.range = parseInt(this.$route.params.index)
      }
      // window.alert("range: " + this.range + " scale: " + this.$route.params.index)
    },
    getIndex() {
      return this.index ++
    },
    makeGen() {
      let _obj;
      while (this.tableData.length < this.maxNumber) {
        let choice = Math.round(Math.random() * 2);
        if(choice === 1)
          _obj = this.add();
        else
          _obj = this.sub();
        if (_obj !== undefined) this.tableData.push(_obj);
      }
    },
    // 按范围生成随机数
    randomNum() {
      return Math.round(Math.random() * this.range);
    },
    // 生成加法数
    add() {
      let _a = this.randomNum();
      let _b = this.randomNum();
      let _temp = {};
      if (_a + _b > this.range) {
        this.add();
      } else {
        _temp = {
          index: this.index ++,
          number: this.questionNum ++,
          exercise: _a + ' + ' + _b + ' = ',
          answer: _a + _b
        };
        return _temp;
      }
    },
    sub() {
      let _a = this.randomNum();
      let _b = this.randomNum();
      let _temp = {
        index: this.index ++,
        number: this.questionNum ++,
        exercise: _a + ' - ' + _b + ' = ',
        answer: _a - _b
      };
      if (_a < _b) {
        _temp.exercise = _b + ' - ' + _a + ' = '
        _temp.answer = _b - _a;
      }
      return _temp;
    },
    showAnswer(){
      // window.alert("你的结果：" + this.inputNum[index] + "\n正确答案：" + p)
      this.showFlag = true
    },
    checkAnswer(index) {
      let p = this.tableData[index].answer
      if(this.inputNum[index] != p){
        return "<span style='color: #ff0000'> 错误！</span>" +
            "<i class='el-icon-circle-close' style='color: #ff0000'></i>"
      }
      return "<span style='color: #42b983'> 正确！</span>" +
          "<i class='el-icon-circle-check' style='color: #42b983;'></i>"
    }
  }
}

</script>

<style lang="less">
	@import '../style/common';
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .table_container{
        padding: 20px;
    }
    .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>
